<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>grape-UI</title>
  <style>
    /*CSS reset*/
    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    /*在根元素html声明全局CSS变量*/
    /*:root {*/
    /*  --button-height: 32px;*/
    /*  --font-size: 14px;*/
    /*  --button-bg: white;*/
    /*  --button-active-bg: #eee;*/
    /*  --border-radius: 4px;*/
    /*  --color: #333;*/
    /*  --border-color: #999;*/
    /*  --border-color-hover: #666;*/
    /*}*/

    #app {
      margin: 20px;
    }

    body {
      font-size: var(--font-size);
    }

    .box {
      margin: 20px 20px;
    }
  </style>
</head>
<body>
<div id="app">

  <div class="box">
    <g-row>
      <g-col span="12">col-12</g-col>
      <g-col span="12">col-12</g-col>
    </g-row>
    <g-row>
      <g-col span="8">col-8</g-col>
      <g-col span="8">col-8</g-col>
      <g-col span="8">col-8</g-col>
    </g-row>
    <g-row>
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
    </g-row>
    <g-row>
      <g-col span="2">col-2</g-col>
      <g-col span="22">col-22</g-col>
    </g-row>
  </div>
  <div class="box">
    <g-row>
      <g-col span="2">col-2</g-col>
      <g-col span="20" offset="2">col-20</g-col>
    </g-row>
    <g-row>
      <g-col span="4">col-4</g-col>
      <g-col span="18" offset="2">col-18</g-col>
    </g-row>
    <g-row>
      <g-col span="4">col-4</g-col>
      <g-col span="8" offset="2">col-8</g-col>
      <g-col span="8" offset="2">col-8</g-col>
    </g-row>
    <g-row>
      <g-col span="4">col-4</g-col>
      <g-col span="4" offset="6">col-8</g-col>
      <g-col span="8" offset="2">col-8</g-col>
    </g-row>
  </div>
  <div class="box">
    <g-row gutter="20">
      <g-col span="12">col-12</g-col>
      <g-col span="12">col-12</g-col>
    </g-row>
    <g-row gutter="20">
      <g-col span="8">col-8</g-col>
      <g-col span="8">col-8</g-col>
      <g-col span="8">col-8</g-col>
    </g-row>
    <g-row gutter="20">
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
    </g-row>
    <g-row gutter="20">
      <g-col span="2">col-2</g-col>
      <g-col span="22">col-22</g-col>
    </g-row>
  </div>

  <div class="box">
    <g-row align="left">
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
    </g-row>
    <g-row align="right">
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
    </g-row>
    <g-row align="center">
      <g-col span="6">col-6</g-col>
      <g-col span="6">col-6</g-col>
    </g-row>
  </div>

  <div class="box">
    <g-row>
      <g-col span="24"
             :ipad="{span: 10, offset: 2}"
             :narrow-pc="{span: 10}"
             :pc="{span: 8}"
             :wide-pc="{span: 4}"
      >col</g-col>
      <g-col span="24"
             :ipad="{span: 10, offset: 2}"
             :narrow-pc="{span: 14}"
             :pc="{span: 16}"
             :wide-pc="{span: 20}"
      >col</g-col>
    </g-row>
  </div>


  <div class="box">
    <g-input value="张三"></g-input>
    <g-input value="李四" disabled></g-input>
    <g-input value="王五" readonly></g-input>
  </div>
  <div class="box">
    <g-input value="王五" error="姓名不能少于两个字"></g-input>
  </div>
  <div class="box">
    <g-input value="哈哈" tip="输入信息正确"></g-input>
  </div>
  <div class="box">
    <g-input v-model="message"></g-input>
    {{message}}
  </div>

  <div class="box">
    <g-button type="info" :loading="loading" @click="loading=true" round icon="setting">默认按钮</g-button>
    <g-button icon="setting" :loading="loading2" @click="loading2=!loading2">
      按钮
    </g-button>
    <g-button icon="setting" icon-position="right" :loading="loading3" @click="loading3=!loading3">
      按钮
    </g-button>
    <g-button-group>
      <g-button icon="left" type="primary">上一页</g-button>
      <g-button icon="right" icon-position="right" type="primary">下一页</g-button>
    </g-button-group>
  </div>
  <div class="box">
    <g-button>按钮</g-button>
    <g-button type="text">按钮</g-button>
    <g-button type="info" icon="edit">按钮</g-button>
    <g-button type="primary" icon="edit">按钮</g-button>
    <g-button type="success" simple>按钮</g-button>
    <g-button type="warning" simple>按钮</g-button>
    <g-button type="danger" simple>按钮</g-button>
  </div>
  <div class="box">
    <g-button icon="edit" circle></g-button>
    <g-button type="info" icon="edit" circle></g-button>
    <g-button type="success" icon="thumb-up" circle></g-button>
    <g-button type="warning" icon="download" circle></g-button>
    <g-button type="danger" icon="delete" circle></g-button>
  </div>
</div>


<script src="src/app.js"></script>
<script src=//at.alicdn.com/t/font_1922912_b0dxmqaez87.js"></script>
</body>
</html>